<template>
  <div class="max-w-4xl mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">时间戳转换工具</h2>
      
      <!-- 当前时间 -->
      <div class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
        <div class="flex flex-wrap justify-between items-center gap-4">
          <div class="space-y-1">
            <div class="text-sm text-gray-500 dark:text-gray-400">当前时间</div>
            <div class="font-mono text-lg">{{ currentDateTime }}</div>
          </div>
          <div class="space-y-1">
            <div class="text-sm text-gray-500 dark:text-gray-400">当前时间戳</div>
            <div class="font-mono text-lg">{{ currentTimestamp }}</div>
          </div>
          <button
            @click="updateCurrentTime"
            class="px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors text-gray-700 dark:text-gray-300"
          >
            刷新
          </button>
        </div>
      </div>

      <!-- 转换区域 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 时间戳转日期时间 -->
        <div class="space-y-4">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">时间戳转日期时间</h3>
          <div class="space-y-2">
            <input
              v-model="timestampInput"
              type="text"
              placeholder="请输入时间戳..."
              class="w-full px-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono"
            />
            <div class="flex gap-2">
              <button
                @click="convertTimestamp"
                class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors"
              >
                转换
              </button>
              <button
                @click="() => timestampInput = String(currentTimestamp)"
                class="px-4 py-2 rounded-lg bg-gray-500 hover:bg-gray-600 text-white font-medium transition-colors"
              >
                使用当前时间戳
              </button>
            </div>
          </div>
          <div v-if="timestampResult" class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg font-mono">
            {{ timestampResult }}
          </div>
          <div v-if="timestampError" class="p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg">
            {{ timestampError }}
          </div>
        </div>

        <!-- 日期时间转时间戳 -->
        <div class="space-y-4">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">日期时间转时间戳</h3>
          <div class="space-y-2">
            <input
              v-model="dateTimeInput"
              type="datetime-local"
              step="1"
              class="w-full px-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <div class="flex gap-2">
              <button
                @click="convertDateTime"
                class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors"
              >
                转换
              </button>
              <button
                @click="useCurrentDateTime"
                class="px-4 py-2 rounded-lg bg-gray-500 hover:bg-gray-600 text-white font-medium transition-colors"
              >
                使用当前时间
              </button>
            </div>
          </div>
          <div v-if="dateTimeResult" class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg font-mono">
            {{ dateTimeResult }}
          </div>
          <div v-if="dateTimeError" class="p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg">
            {{ dateTimeError }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// 当前时间相关
const currentDateTime = ref('');
const currentTimestamp = ref(0);
let timer: number;

const updateCurrentTime = () => {
  const now = new Date();
  currentDateTime.value = now.toLocaleString('zh-CN', { hour12: false });
  currentTimestamp.value = Math.floor(now.getTime() / 1000);
};

onMounted(() => {
  updateCurrentTime();
  timer = window.setInterval(updateCurrentTime, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

// 时间戳转日期时间
const timestampInput = ref('');
const timestampResult = ref('');
const timestampError = ref('');

const convertTimestamp = () => {
  try {
    const timestamp = parseInt(timestampInput.value);
    if (isNaN(timestamp)) {
      throw new Error('请输入有效的数字');
    }

    // 处理毫秒和秒两种格式
    const date = new Date(timestamp.toString().length === 10 ? timestamp * 1000 : timestamp);
    if (date.toString() === 'Invalid Date') {
      throw new Error('无效的时间戳');
    }

    timestampResult.value = date.toLocaleString('zh-CN', { hour12: false });
    timestampError.value = '';
  } catch (err) {
    timestampError.value = (err as Error).message;
    timestampResult.value = '';
  }
};

// 日期时间转时间戳
const dateTimeInput = ref('');
const dateTimeResult = ref('');
const dateTimeError = ref('');

const convertDateTime = () => {
  try {
    if (!dateTimeInput.value) {
      throw new Error('请选择日期时间');
    }

    const timestamp = Math.floor(new Date(dateTimeInput.value).getTime() / 1000);
    if (isNaN(timestamp)) {
      throw new Error('无效的日期时间');
    }

    dateTimeResult.value = `${timestamp} (秒)\n${timestamp * 1000} (毫秒)`;
    dateTimeError.value = '';
  } catch (err) {
    dateTimeError.value = (err as Error).message;
    dateTimeResult.value = '';
  }
};

const useCurrentDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  
  dateTimeInput.value = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
};
</script> 